<template>
    <div class='box'>
        <router-view></router-view>
        <footer>
            <ul>
                <router-link tag='li' to='/'>
                    <img src="../../static/yiji/b1.jpg" alt="">
                    <p> 菜单</p>
                </router-link>
                <router-link tag='li' to='topic'>
                    <img src="../../static/yiji/b2.jpg" alt="">
                    <p>话题</p>
                </router-link>

                <router-link tag='li' to='/concern'>
                    <img src="../../static/yiji/b3.jpg" alt="">
                    <p>关注</p>
                </router-link>
                <router-link tag='li' to='/my'>
                    <img src="../../static/yiji/b4.jpg" alt="">
                    <p>我的</p>
                </router-link>
            </ul>
        </footer>
    </div>
</template>
<script>
export default {};
</script>
<style  scoped lang='scss'>
ul,
li,
footer,
ul,
li,
p {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  footer {
    width: 100%;
    height: calc(153rem / 67.5);
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 2;
    background: white;
    border-top: 1px solid #e4e4e4;
    box-sizing: border-box;
    font-size: 10px;
    ul {
      width: 100%;
      height: calc(153rem / 67.5);
      display: -webkit-box;
      li {
        width: calc(1080rem / 25);
        -webkit-box-flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img {
          width: calc(71rem / 67.5);
          height: calc(71rem / 67.5);
        }
        p {
          font-size: calc(33rem / 67.5);
        }
      }
    }
  }
}
</style>


